<template>
  <div id="sales-success-order">
    <div class="search-box">
      <el-form>
        <el-form-item label="店铺名称：">
          <el-select
            :class="msgLight ? 'msgLight' : ''"
            v-model.trim="searchForm.shopId"
            placeholder="请选择店铺"
            size="small"
            filterable
            :filter-method="dataFilter"
            clearable
          >
            <el-option
              v-for="(item, index) in shopNameList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划ID：">
          <el-input
            placeholder="请输入计划ID"
            v-model.trim="searchForm.planCode"
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="任务ID：">
          <el-input
            placeholder="请输入任务ID"
            v-model.trim="searchForm.taskCode"
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="商品ID：">
          <el-input
            placeholder="请输入商品ID"
            v-model.trim="searchForm.productId"
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="推手账号：">
          <el-input
            placeholder="请输入推手账号"
            v-model.trim="searchForm.account"
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="付款金额：">
          <el-input
            placeholder="请输入付款金额"
            v-model.trim="searchForm.payMoney"
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="订单号：">
          <el-input
            placeholder="请输入订单号"
            v-model.trim="searchForm.orderNum"
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="完成时间 ：">
          <el-date-picker
            size="small"
            v-model.trim="completeTime"
            type="datetimerange"
            @change="changeCompleteTime"
            :default-time="['00:00:00', '23:59:59']"
            range-separator="至"
            start-placeholder="开始日期"
            :picker-options="pickerOptions"
            end-placeholder="结束日期"
            :style="msgLight2 ? 'border:1px solid red;' : ''"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="审核时间 ：">
          <el-date-picker
            size="small"
            v-model.trim="checkTime"
            type="datetimerange"
            @change="changeCheckTime"
            :default-time="['00:00:00', '23:59:59']"
            range-separator="至"
            start-placeholder="开始日期"
            :picker-options="pickerOptions"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="任务开始时间 ：">
          <el-date-picker
            size="small"
            v-model.trim="taskTime"
            type="datetimerange"
            @change="changeTaskTime"
            :default-time="['00:00:00', '23:59:59']"
            range-separator="至"
            start-placeholder="开始日期"
            :picker-options="pickerOptions"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="标记 ：">
          <el-select
            v-model.trim="searchForm.mark"
            placeholder="请选择"
            size="mini"
            style="width: 100px;"
          >
            <el-option
              v-for="item in markOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标旗 ：" v-if="merchantData.auth_type == 1">
          <el-select
            v-model.trim="searchForm.flagStatus"
            placeholder="请选择"
            size="mini"
            style="width: 100px;"
          >
            <el-option
              v-for="item in flagList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            class="search-btn"
            icon="el-icon-ali-search"
            @click="searchData"
            >查&nbsp;询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            class="reset-btn"
            icon="el-icon-ali-reset"
            @click="resetSearchParam"
            >重&nbsp;置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="table-box">
      <div class="table-header-box">
        <el-button
          class="search-btn"
          icon="el-icon-ali-look"
          @click="accountSearch"
          >账号查询</el-button
        >
      </div>
      <el-table border :data="tableData" max-height="580px">
        <el-table-column prop="platform_type" label="店铺类型/店铺名称">
          <div slot-scope="scope">
            <div class="textColor">{{ getShopType(scope.row) }}</div>
            <div>{{ scope.row.shop_name }}</div>
          </div>
        </el-table-column>
        <el-table-column width="120px" prop="goods_img" label="商品主图">
          <el-popover
            placement="right"
            trigger="hover"
            slot-scope="scope"
            v-if="scope.row.goods_img"
          >
            <img class="goods-preview-img" :src="scope.row.goods_img" />
            <img
              slot="reference"
              :src="scope.row.goods_img"
              style="width: 80px;height: 80px"
            />
          </el-popover>
        </el-table-column>
        <el-table-column prop="product_id" label="应付金额/商品ID">
          <div slot-scope="scope">
            <div class="textColor">{{ scope.row.all_pay_money }}</div>
            <div>{{ scope.row.product_id }}</div>
          </div>
        </el-table-column>
        <el-table-column prop="tb_name" label="推手账号/订单号">
          <div slot-scope="scope">
            <div class="textColor">{{ scope.row.tb_name }}</div>
            <div style="color: #ee7b5a;">{{ scope.row.order_num }}</div>
          </div>
        </el-table-column>
        <el-table-column prop="all_pay_money" label="实付金额/实付佣金">
          <div slot-scope="scope">
            <div class="textColor">{{ scope.row.real_pay }}</div>
            <div style="color: #ee7b5a;">{{ scope.row.all_commission }}</div>
          </div>
        </el-table-column>
        <el-table-column prop="over_time" label="完成时间/审核时间">
          <div slot-scope="scope">
            <div>{{ scope.row.over_time }}</div>
            <div>{{ scope.row.check_time }}</div>
          </div>
        </el-table-column>
        <el-table-column prop="plan_code" label="计划ID/任务ID">
          <div slot-scope="scope">
            <div
              class="planCodeStyle"
              @click="toPlanDetailPage(scope.row.plan_id, scope.row)"
            >
              {{ scope.row.plan_code }}
            </div>
            <div>{{ scope.row.task_code }}</div>
          </div>
        </el-table-column>

        <el-table-column prop="flag_status" label="标旗情况">
          <div slot-scope="scope">
            <div style="color: #ee7b5a;">{{ scope.row.flag_status == 1 ? "是" : "否" }}</div>
          </div>
        </el-table-column>

        <el-table-column
          label="操作"
          fixed="right"
          width="130"
          class-name="shenghe"
        >
          <template slot-scope="scope">
            <div class="success-list-btn">
              <el-button
                class="look-btn"
                style="margin-right: -10px; background: #909399;"
                v-if="
                  otherShopType.indexOf(scope.row.shop_type) >= 0 &&
                    scope.row.pay_img
                "
                size="mini"
                @click="vPayImg(scope.row)"
                >付款截图</el-button
              >
              <el-button
                class="appeal-btn"
                v-if="scope.row.appeal_status == 4"
                size="mini"
                @click="openUrgeReceipt(scope.row.id)"
              >催收</el-button>
              <el-button
                class="mark-btn"
                style="margin: 0 auto;"
                size="mini"
                @click="markOrder(scope.row)"
                v-if="scope.row.mark == 2"
                >标记</el-button
              >
              <div class="flag-div" @click="markOrder(scope.row)" v-else>
                <img src="../../assets/image/flag_icon.png" alt="" />
              </div>
              <el-button
                class="appeal-btn"
                v-if="scope.row.appeal_status == 4"
                size="mini"
                @click="openAppealOrder(scope.row)"
                >申诉</el-button
              >
              <div v-else>{{ appealStatus[scope.row.appeal_status] }}</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="allTableData" id="exportTable" border v-show="false">
        <el-table-column
          prop="shop_type"
          label="店铺类型"
          :formatter="getShopType"
        ></el-table-column>
        <el-table-column prop="shop_name" label="店铺名称"></el-table-column>
        <el-table-column prop="product_id" label="商品ID"></el-table-column>
        <el-table-column
          prop="entrance_type"
          label="入口类型"
          :formatter="getEntranceType"
        ></el-table-column>
        <el-table-column prop="keyword" label="关键词">
          <div
            slot-scope="scope"
            v-if="scope.row.entrance_type == 1 || scope.row.entrance_type == 2"
          >
            {{ scope.row.keyword }}
          </div>
        </el-table-column>
        <el-table-column prop="tb_name" label="推手账号"></el-table-column>
        <el-table-column
          prop="all_pay_money"
          label="应付金额"
        ></el-table-column>
        <el-table-column prop="real_pay" label="实付金额"></el-table-column>
        <el-table-column prop="order_num" label="订单号"></el-table-column>
        <el-table-column prop="all_commission" label="佣金"></el-table-column>
        <el-table-column prop="over_time" label="完成时间"></el-table-column>
        <el-table-column prop="check_time" label="审核时间"></el-table-column>
        <el-table-column prop="task_code" label="任务ID"></el-table-column>
        <el-table-column prop="plan_code" label="计划ID"></el-table-column>
        <el-table-column
          prop="mark"
          label="是否标记"
          :formatter="changeMark"
        ></el-table-column>
      </el-table>
      <div class="table-footer">
        <el-popover
          placement="top-start"
          title="导出功能说明"
          width="200"
          trigger="hover"
        >
          <div>
            操作成功后会自动上锁60秒 <br>
            倒计时结束后，自动解锁 <br>
          </div>
          <el-button
            slot="reference"
            :icon="lock ? 'el-icon-download' : 'el-icon-ali-password'"
            class="download-btn"
            :style="lock ? '' : 'background:#ccc'"
            @click="exportSaleTaskDone"
            >{{ lock ? "导出" : dtime + " S" }}</el-button
          >
        </el-popover>
        <!-- <el-button
          icon="el-icon-download"
          class="download-btn"
          @click="downloadExcel"
          >导出</el-button
        > -->
        <el-pagination
          :page-sizes="[5, 10, 15, 20]"
          :page-size="searchForm.pageSize"
          :current-page="searchForm.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageToatal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
    <v-appeal
      :appealForm="appealForm"
      @closeDialog="closeAppealDialog"
      @confrimAppeal="confrimAppeal"
      v-if="showAppealDialog"
    ></v-appeal>
    <el-dialog
      title="账号查询"
      :visible.sync="isShowAccountDialog"
      width="1000px"
      style="height: 400px;"
      class="search-account-dialog"
    >
      <el-form :inline="true">
        <el-form-item label="店铺类型：">
          <el-select
            v-model.trim="accountForm.platformType"
            placeholder="请选择店铺"
            size="small"
          >
            <el-option
              v-for="(item, index) in shopCheckList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="推手账号：">
          <el-input
            placeholder="请输入推手账号"
            v-model.trim="accountForm.platformName"
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="search-btn" @click="getAccountData()"
            >查&nbsp;&nbsp;询</el-button
          >
        </el-form-item>
      </el-form>
      <div>查询结果：{{ searchResult }}</div>
    </el-dialog>
    <el-dialog
      title="付款截图"
      :visible.sync="isShowPayImgDialog"
      width="500px"
    >
      <div>
        <img style="width: 100%;height: 100%;" :src="payImg" alt="" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  apiGetMerchantShopList,
  apiSuccessCheckSaleTaskList,
  apiPushPlatformName,
  apiMarkSaleTask,
  apiExportSaleTaskDone, // 销量导出信息
  apiExportSaleTaskDownLoad, // 下载文件
  apiUrgeReceipt
} from "../../request/api.js";
import { mapGetters, mapActions } from "vuex";
import vAppeal from "../../components/createAppeal.vue";
export default {
  components: {
    vAppeal
  },
  data() {
    return {
      msgLight: false,
      msgLight2: false,
      lock: true,
      dtime: 60,
      timer: null,
      searchForm: {
        token: "",
        page: 1,
        pageSize: 10,
        shopId: "",
        productId: "",
        planCode: "",
        taskCode: "",
        startTime: "",
        endTime: "",
        account: "",
        payMoney: "",
        orderNum: "",
        mark: "",
        checkEndTime: "",
        checkStartTime: "",
        startTaskTime: "",
        endTaskTime: "",
        flagStatus: "",
        shopType: ""
      },
      completeTime: [],
      checkTime: [],
      taskTime: [],
      shopNameList: [],
      shopNameOptions: [],
      platformNameObject: {
        1: "淘宝",
        2: "天猫",
        3: "京东",
        4: "1688",
        13: "唯品会",
        15: "拼多多"
      },
      entranceType: {
        1: "关键词",
        2: "淘口令",
        3: "二维码",
        4: "直播",
        5: "其他"
      },
      pageToatal: 0,
      tableData: [],
      pickerOptions: {
        disabledDate(time) {
          let merchantTime = window.localStorage.getItem("merchantTime");
          let curDate = new Date().getTime();
          let three = merchantTime * 24 * 3600 * 1000;
          let threeMonths = curDate - three;
          return time.getTime() < threeMonths;
        }
      },
      markOptions: [
        {
          value: "",
          label: "全部"
        },
        {
          value: 1,
          label: "是"
        },
        {
          value: 2,
          label: "否"
        }
      ],
      flagList: [
        {
          value: "",
          label: "全部"
        },
        {
          value: 1,
          label: "是"
        },
        {
          value: 2,
          label: "否"
        }
      ],
      appealForm: {},
      appealStatus: {
        1: "申诉已提交",
        2: "申诉正在处理",
        3: "申诉已完成"
      },
      showAppealDialog: false,
      allTableData: [],
      markData: {
        1: "是",
        2: "否"
      },
      isShowAccountDialog: false,
      accountForm: {
        token: "",
        platformType: "",
        platformName: ""
      },
      searchResult: "",
      shopShowType: window.localStorage.getItem("shopShowType"),
      platformTypeList: [
        {
          label: "淘宝",
          value: 1
        },
        {
          label: "天猫",
          value: 2
        },
        {
          label: "京东",
          value: 3
        },
        {
          label: "1688",
          value: 4
        },
        {
          label: "唯品会",
          value: 13
        },
        {
          label: "拼多多",
          value: 15
        }
      ],
      shopCheckList: [],
      otherShopType: [1, 2, 3, 13],
      isShowPayImgDialog: false,
      payImg: "",
      userToken: window.localStorage.getItem("token"),
      merchantData: JSON.parse(window.localStorage.getItem("merchantConfig"))
    };
  },
  created() {
    if (this.merchantData.shop_show_type) {
      let shopShowTypeArr = this.merchantData.shop_show_type.split(",");
      for (var i in this.platformTypeList) {
        if (
          shopShowTypeArr.indexOf(this.platformTypeList[i].value.toString()) >=
          0
        ) {
          this.shopCheckList.push(this.platformTypeList[i]);
        }
      }
    } else {
      this.shopCheckList = this.platformTypeList;
    }
    this.searchForm.token = this.userToken;
    this.searchForm.shopType = this.platformType;
    this.getCurTime();
    this.getShopList();
    this.getTableData();
    this.$confirm("请及时导出数据核对，数据仅保留一个月", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {})
      .catch(() => {});
  },
  computed: {
    ...mapGetters(["platformType"])
  },
  watch: {
    platformType: function(val) {
      this.searchForm.shopType = val;
      this.getTableData();
    },
    "searchForm.shopId": function() {
      this.$message("记得点击查询获取最新数据哦");
    },
    dtime() {
      if (this.dtime == 0) {
        this.lock = true;
        clearInterval(this.timer);
        this.dtime = 60;
      }
    }
  },
  methods: {
    dataFilter(val) {
      this.searchForm.shopId = val;
      if (val) {
        //val存在
        this.shopNameList = this.shopNameOptions.filter(item => {
          if (
            !!~item.name.indexOf(val) ||
            !!~item.name.toUpperCase().indexOf(val.toUpperCase())
          ) {
            return true;
          }
        });
      } else {
        //val为空时，还原数组
        this.shopNameList = this.shopNameOptions;
      }
    },
    getShopList() {
      this.$isClick(true);
      apiGetMerchantShopList({
        token: this.userToken
      })
        .then(res => {
          this.$isClick(false);
          if (res.code == 1) {
            for (var i in res.msg.merchant_shop_list) {
              this.shopNameOptions.push({
                name:
                  this.platformNameObject[res.msg.merchant_shop_list[i].type] +
                  "-" +
                  res.msg.merchant_shop_list[i].name,
                id: res.msg.merchant_shop_list[i].id
              });
            }
            this.shopNameList = this.shopNameOptions;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(res => {
          this.$isClick(false);
          this.$message.error(res.msg);
        });
    },
    getTableData() {
      this.$isClick(true);
      apiSuccessCheckSaleTaskList(this.searchForm)
        .then(res => {
          this.$isClick(false);
          if (res.code == 1) {
            this.tableData = res.msg.res;
            this.pageToatal = res.msg.allNum;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(res => {
          this.$isClick(false);
          this.$message.error(res.msg);
        });
    },
    getEntranceType(row) {
      return this.entranceType[row.entrance_type];
    },
    getShopType(row) {
      return this.platformNameObject[row.platform_type];
    },
    searchData() {
      this.searchForm.page = 1;
      this.searchForm.pageSize = 10;
      this.getTableData();
    },
    resetSearchParam() {
      this.searchForm = {
        token: this.userToken,
        page: 1,
        pageSize: 10,
        shopId: "",
        productId: "",
        planCode: "",
        taskCode: "",
        startTime: "",
        endTime: "",
        account: "",
        payMoney: "",
        orderNum: "",
        mark: "",
        checkEndTime: "",
        checkStartTime: "",
        startTaskTime: "",
        endTaskTime: "",
        flagStatus: "",
        shopType: this.platformType
      };
    },
    changeMark(row) {
      return this.markData[row.mark];
    },
    vPayImg(row) {
      this.isShowPayImgDialog = true;
      this.payImg = row.pay_img;
    },
    getCurTime() {
      var now = new Date();
      var startTime =
        new Date(new Date().toLocaleDateString()).getTime() -
        24 * 60 * 60 * 1000 * 6;
      var endTime =
        new Date(new Date().toLocaleDateString()).getTime() +
        24 * 60 * 60 * 1000 -
        1;
      this.completeTime = [startTime, endTime];
      this.searchForm.startTime = Math.floor(startTime / 1000);
      this.searchForm.endTime = Math.floor(endTime / 1000);
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.getTableData();
    },
    changeTaskTime(val) {
      if (this.taskTime == null) {
        this.searchForm.startTaskTime = "";
        this.searchForm.endTaskTime = "";
      } else {
        this.dataDiff(val[0], val[1], "check");
        this.searchForm.startTaskTime = this.changeTimeType(val[0]);
        this.searchForm.endTaskTime = this.changeTimeType(val[1]);
      }
    },
    changeCheckTime(val) {
      if (this.checkTime == null) {
        this.searchForm.checkStartTime = "";
        this.searchForm.checkEndTime = "";
      } else {
        this.dataDiff(val[0], val[1], "check");
        this.searchForm.checkStartTime = this.changeTimeType(val[0]);
        this.searchForm.checkEndTime = this.changeTimeType(val[1]);
      }
    },
    changeCompleteTime(val) {
      if (this.completeTime == null) {
        this.searchForm.startTime = "";
        this.searchForm.endTime = "";
      } else {
        this.dataDiff(val[0], val[1], "success");
        this.searchForm.startTime = this.changeTimeType(val[0]);
        this.searchForm.endTime = this.changeTimeType(val[1]);
      }
    },
    dataDiff(startTime, endTime, type) {
      let diff = endTime - startTime;
      let t = 31 * 24 * 60 * 60 * 1000;
      if (diff > t) {
        this.$message.error("时间范围不能超过31天");
        if (type == "success") {
          this.completeTime = [];
        } else {
          this.checkTime = [];
        }

        return false;
      }
    },
    changeTimeType(time) {
      var d = new Date(time);
      var s =
        d.getFullYear() +
        "-" +
        (d.getMonth() + 1) +
        "-" +
        d.getDate() +
        " " +
        d.getHours() +
        ":" +
        d.getMinutes() +
        ":" +
        d.getSeconds();
      return new Date(s).getTime() / 1000;
    },
    toPlanDetailPage(id, item) {
      this.$router.push(`/plan/salesPlanDetail?id=${id}&shop_type=${item.platform_type}&status=${item.customize_whether}`);
    },
    // 催单系统 ids 推手任务id(多个用半角英文逗号隔开)
    openUrgeReceipt(ids) {
      this.$confirm('此操作将触发催收功能, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        apiUrgeReceipt({
          token: this.userToken,
          ids
        }).then(res => {
          if (res.code == 1) {
            this.$message({
              type: 'success',
              message: res.msg
            });
          } else {
            this.$message.error(res.msg)
          }
        }).catch(res => {})
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消催收'
        });
      });
    },
    openAppealOrder(row) {
      // console.log(row);
      this.appealForm = {
        token: this.userToken,
        task_type: 1,
        type: 1,
        order_num: row.order_num ? row.order_num : "",
        tb_name: row.tb_name,
        task_code: row.task_code,
        content: "",
        treat_content: "",
        proof_img_url: "",
        appeal_why: "",
        push_id:row.push_id
      };
      this.showAppealDialog = true;
    },
    closeAppealDialog() {
      this.showAppealDialog = false;
    },
    confrimAppeal() {
      this.$message.success("申诉成功，请在申诉工单处查看");
      this.getTableData();
      this.showAppealDialog = false;
    },
    accountSearch() {
      this.isShowAccountDialog = true;
      this.accountForm.platformType = "";
      this.accountForm.platformName = "";
      this.searchResult = "";
    },
    getAccountData() {
      if (this.accountForm.platformType == "") {
        this.$message.error("请先选择店铺类型");
        return;
      }
      if (this.accountForm.platformName == "") {
        this.$message.error("请先输入推手账号");
        return;
      }
      this.accountForm.token = this.userToken;
      this.$isClick(true);
      apiPushPlatformName(this.accountForm)
        .then(res => {
          this.$isClick(false);
          if (res.code == 1) {
            this.searchResult = res.msg;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(res => {
          this.$isClick(false);
          this.$message.error(res.msg);
        });
    },
    markOrder(row) {
      this.$isClick(true);
      apiMarkSaleTask({
        token: this.userToken,
        id: row.id
      })
        .then(res => {
          this.$isClick(false);
          if (res.code == 1) {
            row.mark = row.mark == 1 ? 2 : 1;
            this.$message.success("操作成功");
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(res => {
          this.$isClick(false);
          this.$message.error(res.msg);
        });
    },
    getAllTableData() {
      let data = JSON.parse(JSON.stringify(this.searchForm));
      data.page = 1;
      data.pageSize = this.pageToatal;
      if (data.pageSize == 0) {
        this.$message.error("当前表格没有数据可以导出");
        return;
      }

      this.msgLight = false;
      this.msgLight2 = false;
      // 如果选择了店铺名，并且数据量超过500，提示请缩短任务完成时间
      if (data.pageSize > 500 && data.shopId) {
        this.msgLight2 = true;
        this.$message.error(
          `当前数据:${data.pageSize}（条）,导出限制500条，请缩短任务完成时间`
        );
        return;
      }
      // 如果没选择店铺名，并且数据量超过500，提示选择店铺名
      else if (data.pageSize > 500 && !data.shopId) {
        this.$message(`请选择店铺`);
        this.msgLight = true;
        return;
      }

      this.$message(`正在导出，请耐心等待...`);
      return new Promise(resolve => {
        this.$isClick(true);
        apiSuccessCheckSaleTaskList(data)
          .then(res => {
            this.$isClick(false);
            if (res.code == 1) {
              this.allTableData = res.msg.res;
              resolve(res);
            } else {
              this.$message.error(res.mag);
            }
          })
          .catch(res => {
            this.$isClick(false);
            this.$message.error(res.msg);
          });
      });
    },
    downloadExcel() {
      var wb = "";
      var xlsxParam = { raw: true };
      this.getAllTableData().then(() => {
        this.$loading.show("下载中");
        wb = this.XLSX.utils.table_to_book(
          document.querySelector("#exportTable"),
          xlsxParam
        );
        var wbout = this.XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          this.FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            "销量已完成订单.xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        setTimeout(() => {
          this.$loading.hide();
          this.$message.success("下载完成");
        }, 1000);
        return wbout;
      });
    },
    exportSaleTaskDone() {
      if (!this.lock) {
        return;
      }
      this.lock = false;
      this.timer = setInterval(() => {
        this.dtime--;
      }, 1000);
      let respSplit = "";
      apiExportSaleTaskDone({
        token: this.userToken,
        getSplit: "",
        shopId:  this.searchForm.shopId || null,
        shopType:  this.searchForm.shopType || null,
        startTime:  this.searchForm.startTime || null,
        endTime:  this.searchForm.endTime || null
      }).then(res => {
        let obj = eval(res);
        if (obj.code != 200) {
          this.$message.error(obj.msg);
          return false;
        }
        if(obj.total==0){
          this.$message("没有可以导出的数据，请更换搜索条件或稍后重试");
          return false;
        }
        respSplit = obj.data;
        // this.$message("总数:" + obj.total + "|切成" + obj.split + "分");
        if(this.pageToatal!=obj.total){
          this.getTableData();
        }
        this.$confirm(
          "当前导出数据总数: " +
            obj.total +
            (obj.split > 1
              ? " ，为了加快导出速度，已智能分成 " +
                obj.split +
                " 个文件，确定导出吗？"
              : ""),
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "info"
          }
        )
          .then(() => {
            let time = 0;
            let _this = this;
            this.$message.success("数据正在导出，请耐心等待");
            respSplit.forEach((element,index) => {
              setTimeout(function(){
                _this.getData(
                  element,
                  "商户已完成订单第" + element.page + "页",
                  obj.split
                );
                _this.$message("商户已完成订单第" + element.page + "页 准备中");
              },(index+1)%2==0?time+=5000:time)
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
            this.lock = true;
            this.dtime = 60;
            clearInterval(this.timer);
            return;
          });
      });
    },

    getData(v, name, split) {
      this.$isClick(true);
      apiExportSaleTaskDownLoad({
        token: this.userToken,
        getData: "",
        endTime: v.endTime,
        page: v.page,
        pageSize: v.pageSize,
        shopId: v.shopId,
        shopType: v.shopType,
        startTime: v.startTime
      }).then(res => {
        this.$isClick(false);
        // 没有前置机时
        // // this.$message(`当前下载进度${v.page}/${split}`)
        // let blob = new Blob([res]);
        // let a = document.createElement("a");
        // a.download = name + ".csv";
        // a.href = window.URL.createObjectURL(blob);
        // a.click();
        console.log(res);

        // 有前置机时
        let a = document.createElement("a");
        a.href = res.msg;
        a.click();
        this.$message.success("商户已完成订单第" + v.page + "页 已完成");
      });
    }
  }
};
</script>

<style lang="less">
#sales-success-order {
  .table-header-box {
    .search-btn {
      background: #f16f6f;
      color: #fff;
      padding: 8px 15px !important;
      margin-bottom: 10px;
    }
  }
  .success-list-btn {
    .look-btn {
      background: #f16f6f;
      color: #fff;
      padding: 8px 15px !important;
      margin-bottom: 5px;
    }
    .mark-btn {
      background: @themeColor;
      color: #fff;
      padding: 8px 15px !important;
      margin-bottom: 5px;
    }
    .appeal-btn {
      background: red;
      color: #fff;
      padding: 8px 15px !important;
      margin-left: 0 !important;
    }
    .flag-div {
      border: 1px solid #e0e0e0;
      border-radius: 5px;
      display: block;
      width: 60px;
      height: 30px;
      margin: 5px auto;
      padding-top: 5px;
      img {
        width: 15px;
        height: 20px;
      }
    }
  }
  .search-account-dialog {
    .search-btn {
      background: @themeColor;
      color: #fff;
      padding: 10px 20px !important;
    }
  }
}
.el-popover {
  .goods-preview-img,
  .keyword-preview-img {
    width: 200px;
    height: 200px;
  }
}
.msgLight input {
  border: red solid 1px;
}
</style>
